@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        分类
                    </div>
                    <div class="list-group" id="tpl-category" style="max-height: 600px; overflow-y: scroll;">
                    </div>
                </div>
            </div>

            <div class="col-md-2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        产品
                    </div>
                    <div class="list-group" id="tpl-product" style="max-height: 600px; overflow-y: scroll;">
                    </div>
                </div>
            </div>

            <div class="col-md-5">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        详细信息
                    </div>
                    <div class="panel-body" id="tpl-detail">
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        计算器
                    </div>
                    <div class="panel-body">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                  <th>Product</th>
                                  <th>Price</th>
                                  <th>Number</th>
                                  <th> </th>
                                </tr>
                            </thead>
                            <tbody id="tpl-calculate">
                            </tbody>
                        </table>
                        <div class="text-right">
                            <button type="button" class="btn btn-default btn-xs pull-left clear-cart" aria-label="Clear">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                            </button>
                            <span class=" pull-left">&nbsp;</span>
                            <button type="button" class="btn btn-default btn-xs pull-left save-com" aria-label="Save">
                                <span class="glyphicon glyphicon-saved" aria-hidden="true"></span>
                            </button>
                            ￥<strong id="total"></strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script id="category" type="text/x-handlebars-template">
        @{{#each this}}
            <a href="#" class="list-group-item" data="@{{id}}">
                <span class="badge">@{{count}}</span>
                @{{name}}
            </a>
        @{{/each}}
    </script>

    <script id="product" type="text/x-handlebars-template">
        @{{#each this}}
            <a href="#" class="list-group-item" data="@{{id}}">
                <div>
                    <button type="button" class="btn btn-default btn-xs pull-right add-cart" aria-label="Add">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    </button>
                    <strong class="name">@{{name}}</strong>
                </div>
                <div>
                    ￥ <span class="price">@{{price}}</span> &nbsp;&nbsp;&nbsp;&nbsp;
                    <span class="glyphicon glyphicon-time" aria-hidden="true"></span> @{{time_consuming}}
                </div>
            </a>
        @{{/each}}
    </script>

    <script id="calculate" type="text/x-handlebars-template">
        @{{#each this}}
            <tr>
              <td class="name">@{{name}}</td>
              <td class="price">@{{price}}</td>
              <td>@{{num}}</td>
              <td>
                <button type="button" class="btn btn-default btn-xs minus-cart" aria-label="Minus">
                    <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                </button>
              </td>
            </tr>
        @{{/each}}
    </script>

    <script id="detail" type="text/x-handlebars-template">
        <table class="table table-bordered">
            <tbody>
                <tr>
                  <td colspan="4"><h3>@{{product.name}} <span id="product-id">#@{{product.id}}</span></h3></td>
                </tr>
                <tr>
                  <th scope="row">售价</th>
                  <td>@{{product.price}}</td>
                  <th scope="row">产量</th>
                  <td>@{{product.number}}</td>
                </tr>
                <tr>
                  <th scope="row">耗时</th>
                  <td>@{{product.time_consuming}}</td>
                  <th scope="row">经验</th>
                  <td>@{{#if product.experience}}@{{product.experience}}@{{else}}未知@{{/if}}</td>
                </tr>
                <tr>
                  <th scope="row">性价比</th>
                  <td>--</td>
                  <th scope="row">畅销度</th>
                  <td>***</td>
                </tr>
                <tr>
                  <td colspan="4">@{{description}}</td>
                </tr>
            </tbody>
        </table>
  
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th scope="row">组成</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        @{{#each up}}
                            @{{name}}(@{{number}}个)
                        @{{/each}}
                    </td>
                </tr>
            </tbody>
        </table>
  
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th scope="row">用途</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        @{{#each down}}
                            @{{name}}(@{{number}}个)
                        @{{/each}}
                    </td>
                </tr>
            </tbody>
        </table>
    </script>

@endsection



@section('script')
<script type="text/javascript">
    $(document).ready(function(){
        $.getJSON('{{ url('farm_categories') }}', function(res){
            var tpl = Handlebars.compile($("#category").html());
            $('#tpl-category').html(tpl(res));

            $('#tpl-category .list-group-item').eq(0).trigger('click');
        });

        $("#tpl-category").on("click", ".list-group-item", function(){
            $(this).addClass('active');
            $(this).siblings().removeClass('active');

            var category_id = $(this).attr('data');
            $.getJSON('{{ url('farm_products') }}', {'category_id':category_id}, function(res){
                var tpl = Handlebars.compile($("#product").html());
                $('#tpl-product').html(tpl(res));
            });

            return false;
        });

        $("#tpl-product").on("click", ".list-group-item", function(){
            $(this).addClass('active');
            $(this).siblings().removeClass('active');

            var id = $(this).attr('data');
            $.getJSON('{{ url('farm_products') }}'+'/'+id, function(res){
                var tpl = Handlebars.compile($("#detail").html());
                $('#tpl-detail').html(tpl(res));
            });

            return false;
        });

        var cart_list = new Object();
        $("#tpl-product").on("click", ".add-cart", function(){
            var item = $(this).parent().parent();
            var id   = item.attr('data');
            var name = item.find('.name').text();
            var price = item.find('.price').text();
            var exists = false;

            $.each(cart_list, function(index, value) {
                if (index == name) {
                    cart_list[name]['num'] += 1;
                    exists = true;
                    return false;
                }
            });

            if (exists == false) {
                cart_list[name]=new Object();
                cart_list[name]['id'] = id;
                cart_list[name]['name'] = name;
                cart_list[name]['price'] = price;
                cart_list[name]['num'] = 1;
            }

            display(cart_list);
            return false;
        });

        $("#tpl-calculate").on("click", ".minus-cart", function(){
            var item = $(this).parent().parent();
            var name = item.find('.name').text();

            $.each(cart_list, function(index, value) {
                if (index == name) {
                    var num = value['num'];
                    if (num == 1) {
                        delete cart_list[index];
                    } else{
                        cart_list[name]['num'] -= 1;
                    }
                    return false;
                }
            });

            display(cart_list);
            return false;
        });

        $('.clear-cart').click(function(){
            cart_list = new Object();
            display(cart_list);
            return false;
        });

        $('.save-com').click(function(){
            var parent_id = $('#product-id').html();
            parent_id = parent_id.substring(1);
            $.ajax({
              type: "POST",
              url : "{{ url('farm_combinations') }}",
              data: {
                    com: cart_list,
                    parent_id: parent_id,
                    '_token': '{!! csrf_token() !!}'
                },
                function(data) {
                    console.log(data);
                }
            });
        });

        function display(cart){
            var total = 0;
            $.each(cart, function(index, value) {
                total += value.price * value.num;
            });
            $('#total').html(total);
            
            var tpl = Handlebars.compile($("#calculate").html());
            $('#tpl-calculate').html(tpl(cart));
        }
    });

</script>
@endsection